<template>
	<view class="content f fv">
		<view class="top-bar f fac fpj">
			<view class="search-box f fac f1">
				<input class="search-input" focus placeholder-style="color: rgba(39,40,50,0.40);font-size: 28rpx;" />
				<image src="../../static/images/index/search.png"></image>
			</view>
			<view class="text" @click="goBack">取消</view>
		</view>
		<view class="search-list f fv f1">
			<view class="search-user f fv">
				<view class="search-title">用户</view>
				<view class="user-item f fac fpj" v-for="item in 8" @click="goUserHome">
					<view class="left f fac fpj">
						<image src="../../static/images/img/two.png" mode=""></image>
						<view class="f fv fpj">
							<view class="name">开发的示例</view>
							<view class="email">1811082435@qq.com</view>
						</view>
					</view>
					<view class="right isFriend">发消息</view>
				</view>
			</view>
			<view class="search-group f fv">
				<view class="search-title">群组</view>
				<view class="group-item f fac fpj" v-for="item in 8">
					<view class="left f fac fpj">
						<image src="../../static/images/img/two.png" mode=""></image>
						<view class="name">开发的示例</view>
					</view>
					<view class="right notFriend">发消息</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			// 用户主页
			goUserHome() {
				uni.navigateTo({ url:  "/pages/user/userHome" })
			}
		}
	}
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	height: 100vh;
	.top-bar {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.1);
		width: 100%;
		height: 88rpx;
		padding: 0 32rpx;
		box-sizing: content-box;
		padding-top: var(--status-bar-height);
		background-color: $uni-bg-color;
		.search-box {
			height: 60rpx;
			background-color: #F3F4F6;
			border-radius: 10rpx;
			margin-right: 30rpx;
			padding: 4rpx 16rpx 4rpx 20rpx;
			.search-input {
				width: 100%;
				height: 100%;
				font-size: 28rpx;
			}
			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
		.text {
			font-size: 28rpx;
			color: $uni-text-color;
			width: 56rpx;
			margin-right: 64rpx;
		}
	}
	.search-list {
		margin-top: 88rpx;
		padding-top: var(--status-bar-height);
		.search-user,
		.search-group {
			margin-top: 30rpx;
			font-size: 44rpx;
			color: $uni-text-color;
			.search-title {
				padding: 0 32rpx;
			}
			.user-item,
			.group-item {
				width: 100%;
				padding: 20rpx 32rpx;
				&:active {
					background-color: $uni-bg-color-grey;
				}
				.left {
					font-size: 36rpx;
					color: $uni-text-color;
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 20rpx;
						margin-right: 32rpx;
					}
					.email {
						font-size: 28rpx;
						color: #ada7a7;
					}
				}
				.right {
					font-size: 24rpx;
					padding: 8rpx 24rpx;
					border-radius: 24rpx;
				}
				.isFriend {
					color: $uni-text-color;
					background-color: $uni-color-primary;
				}
				.notFriend {
					color: #4AAAFF;
					background-color: rgba(74, 170, 255, 0.10);
				}
			}
		}
	}
	
}
</style>
